<template>
  <vant-form
    ref="form"
    :validate-first="true"
    input-align="right"
    @submit="onSubmit"
    class="page flex vertical"
  >
    <vant-cell title="申请单号" :value="reqNo" />

    <div class="flex-1 page-cont">
      <vant-field label="变更车辆" :rules="[{ validator }]" class="vant-cell-l select-vehicle">
        <template #input>
          <vehicleSearch
            v-for="(item,i) in curForm"
            :key="i"
            :item="item"
            type="select"
            class="w-100p exclude"
            @input="input(item)"
            @change="changeVehicle"
          />
        </template>
      </vant-field>

      <vant-field
        label="授权委托书"
        :rules="[{ required:true , message: `请上传${maxCount}张照片` }]"
        class="vant-cell-l"
      >
        <template #input>
          <app-uploader
            v-model="form.driveImgKeys"
            :max-count="maxCount"
            accept=".png, .jpeg, .jpg"
          />
        </template>
      </vant-field>

      <app-picker-field
        label="变更原因"
        v-model="form.changeReason"
        :columns="changeReason"
        input-align="right"
        :rules="[{ required:true }]"
      ></app-picker-field>
      <div></div>
    </div>

    <vant-cell>
      <vant-button round block type="danger">提交</vant-button>
    </vant-cell>
  </vant-form>
</template>

<script>
import { getHistoryVehicles } from '@apis/history'
import { deepClone } from '@utils/index'
import { saveGovVehicles } from '@apis/apply'
import { Vant } from '@components/Vant/index';
const { Toast } = Vant
export default {
  components: {
    vehicleSearch: () => import('../apply/vehicleSearch')
  },
  data() {
    const { reqNo = '' } = this.$route.query
    return {
      reqNo,
      maxCount: 1,
      changeReason: this.$store.getters['vehicle/changeReason'],
      curForm: [],
      selectId: '',
      vehicleList:[],
      form: {
        changeReason: '',
        driveImgKeys: ''
      }
    }
  },
  created() {
    this.saveGovVehicles();
  },
  methods: {
    input(item) {
      this.selectId = item._id
    },
    changeVehicle(item={}) {
      
      const i = this.curForm.findIndex(form => form._id=== this.selectId)
      this.curForm.splice(i,1,{
         ...this.curForm[i],
         ...item
       })
    },
    open({ vehicleNo }) {
      this.getVehicleList({ vehicleNo });
    },
    getVehicleList({ vehicleNo }) {
      return getHistoryVehicles({ vehicleNo }).then(res => {
        const { data = [] } = res || {}
        this.vehicleList = data.map(item => ({ ...item, code: item.vehicleNo, text: item.vehicleNo }))
      })
    },
    saveGovVehicles() {
      saveGovVehicles({ reqNo: this.reqNo }).then(res => {
        const { data = [] } = res || {};
        this.curForm = data.map(item => ({ ...item, _id: this.createId() }));
        this._curForm = deepClone(this.curForm)
      })
    },
    createId() {
      return Math.random().toFixed(20);
    },
    validator() {
      const vehicleNoDif = [];
      this._curForm.forEach((item, i) => {
        if (item.vehicleNo !== this.curForm[i].vehicleNo) {
          vehicleNoDif.push(item.vehicleNo)
        }
      });
      if (!vehicleNoDif.length) {
        Toast(`请选择变更车辆`);
        return false;
      }
      return true
    },
    onSubmit() {

      console.log(this.form, this.curForm, this._curForm);

    }
  }
}
</script>

<style lang="less" scoped>
.select-vehicle {
  & /deep/ .van-field--error .van-field__control,
  & /deep/ .van-field--error .van-field__control::placeholder {
    color: @field-input-text-color;
  }
}
.select-vehicle {
  padding-right: 0;
  & /deep/ .van-field__control {
    flex-wrap: wrap;
    padding-left: @s-10;
  }
  & /deep/ .van-cell .van-field__control {
    padding-right: @s-10;
  }
}
</style>